<script setup lang="ts">
let role:Ref<string>=ref(useRoute().query.r as string)
const vehicle=ref<VehiclePO>()
onMounted(function (){
  barTitleStore().setTitle('车主认证')
  cFetch<VehiclePO>('/account/api/getVehicleInfo',{
    auth:true,
    defaultOpts:{
      method:"POST",
    }
  }).then(res=>{
    if(res.code===200){
      vehicle.value=res.data[0]
    }
  })
})
function verifyDriver(){
  if(vehicle.value?.carFrontPhoto&&vehicle.value?.carBackPhoto){
    cFetch('/account/api/vehicleAuth',{
      auth:true,
      defaultOpts:{
        method:"POST",
      }
    }).then(res=>{
      if(res.code===200){
        showToast({
          message:'认证成功！',
          duration:2000
        })
        role.value='1'
        cFetch<VehiclePO>('/account/api/getVehicleInfo',{
          auth:true,
          defaultOpts:{
            method:"POST",
          }
        }).then(res=>{
          if(res.code===200){
            vehicle.value=res.data[0]
          }
        })
      }
    })
  }else{
    showToast({
      message:"您必须先将车辆信息补充完整",
      duration:2000
    })
  }
}
let config=useRuntimeConfig()
function replaceURL(url:string):string{
  if(url===config.public.defaultUserAvatarURL)return url
  return config.public.enableReplaceImgURL?url.replace(config.public.oldImgHost,config.public.newImgHost):url
}
</script>

<template>
  <div class="container">
    <div>
      <h4>车辆正面</h4>
      <van-image
          fit="contain"
          width="10rem"
          height="10rem"
          :src="replaceURL(vehicle?.carFrontPhoto || '')"
      >
      </van-image>
    </div>
    <div>
      <h4>行驶证图片</h4>
      <van-image
          fit="contain"
          width="10rem"
          height="10rem"
          :src="replaceURL(vehicle?.carBackPhoto || '')"
      >
      </van-image>
    </div>

  </div>
  <div class="verify-box" v-if="role==='1' ">
    <span style="font-weight: bold;">认证信息</span>
    <span style="margin: 0.8rem 0">认证通过！</span>
    <span>车牌号：{{ vehicle?.carNumber }}</span>
  </div>
  <van-button v-else @click="verifyDriver">立即认证</van-button>
</template>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 1rem 0;
}

.container > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #e2e6ec;
  border-radius: 5px;
}

.verify-box {
  width: 80%;
  padding: 1rem;
  border-radius: 10px;
  background-color: #e6e3e3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
